<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.qnid" class="filter-item" filterable clearable placeholder="问卷">
        <el-option v-for="item in questionnaireList" :key="item.id" :label="item.title" :value="item.id"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" height="670" border>
      <el-table-column label="题目ID" prop="qsid" width="70px" align="center"></el-table-column>
      <el-table-column label="题目内容" prop="title" width="450px" align="center"></el-table-column>
      <el-table-column label="答案" prop="content" align="center"></el-table-column>
      <el-table-column label="回答数量" prop="num" width="90px" align="center"></el-table-column>
      <el-table-column label="占比" width="300px" align="center">
        <template slot-scope="{row}">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="row.ratio" :color="customColors"></el-progress>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getQuestionnaireStatic, getQuestionnaireList } from '@/api/operator'

export default {
  name: 'QuestionnaireStatis',
  data() {
    return {
      listLoading: false,
      downloadLoading: false,
      listQuery: {
        qnid: ''
      },
      total: 0,
      questionnaireList: [],
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#1989fa', percentage: 60 },
        { color: '#5cb87a', percentage: 80 }
      ],
      list: []
    }
  },
  computed: {
  },
  created() {
    this.getQuestionnaire()
  },
  methods: {
    async getList() {
      this.listLoading = true
      getQuestionnaireStatic(this.listQuery).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    async getQuestionnaire() {
      const res = await getQuestionnaireList()
      this.questionnaireList = res.data.items
    },
    handleFilter() {
      this.getList()
    }
  }
}
</script>

